<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
table,th,td{
    border: 1px solid #000;
    border-collapse: collapse;
      padding: 5px;
}
table{
    width: 600px;
    text-align: center;
    margin: 0 auto;
}
caption{
    font-weight: 700px;
}
th{
    background-color: #ededef;
}
tr:hover{
    background-color: #ededef;
}
</style>
<body>
    <table>
        <caption>学生列表</caption>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr>
        <!-- <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr> -->

        <script>
            let students = [
            {name: '小明', age: 18, gender: '男', hometown: '河北省'},
            {name: '小红', age: 19, gender: '女', hometown: '河南省'},
            {name: '小刚', age: 17, gender: '男', hometown: ' 山西省'},
            {name: '小丽', age: 18, gender: '女', hometown: ' 山东省'}]
            for (let i = 0; i <students.length;i++){
               let obj = students[i]
                document.write(`
        <tr>
            <td>${i+1}</td>
            <td>${obj.name}</td>
            <td>${obj.age}</td>
            <td>${obj.gender}</td>
            <td>${obj.hometown}</td>
        </tr>`)
            }

            let arr = [1,2,3,4]
            arr[0]
        </script>
    </table>
    <script>
         
        
         
        //for (let i= 0 ; i <=students.length ; i++){
        //     let obj = students[i]
        //     for(let k in obj){
        //         console.log(obj[k])    
        //         document.write('<table border="1";height="500px";width="500px"><tr>',obj[k],'</tr>')
        //     }
        //     document.write('<br></table>')
        // }



        // let person = {
        //     name: 'andy',
        //     hobit:function(){
        //         document.write('唱跳rap篮球')    
        //     },
        //     sayHi: function(){
        //         document.write('hi~~')
        //     }
        // }
        // person.sayHi()
        // person.hobit()

        // let obj ={
        //     goodsname:'小米',
        //     name:'小米10青春版',
        //     goodsnum:100012816024,
        //     goodsWeiht:'0.55kg',
        //     goodsAddress:'江西'
        // }
        // obj.name ='小米10 plus'
        // obj.color = '粉色'
        // obj.goodsAddress = '中国大陆'

        // document.write(`<div class = box>`)
        // document.write(obj.goodsname+`<br><br>`)
        // document.write('产品名：'+obj.name+'&nbsp'+'&nbsp'+'&nbsp')
        // document.write('商品编号：'+obj.goodsnum+'&nbsp'+'&nbsp'+'&nbsp')
        // document.write('商品毛重：'+obj.goodsWeiht+'&nbsp'+'&nbsp'+'&nbsp')
        // document.write('商品产地:'+obj.goodsAddress+'&nbsp'+'&nbsp'+'&nbsp')
        // document.write('颜色：'+obj.color)
        // document.write(`</div>`)
    </script>
</body>
</html>